<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>输入组件（baInput） | BuildAdmin</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="/images/favicon.ico">
    <meta name="description" content="使用流行技术栈快速创建商业级后台管理系统-BuildAdmin是基于TP6、Vue3.x、Typescript、Vite、Pinia、Element plus等的开源后台系统">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="keywords" content="BuildAdmin,ThinkPHP6通用后台,Vue3后台,BuildAdmin文档,vue3开源后台,vue3模板与案例市场">
    <meta name="author" content="妙码生花">
    <meta name="robots" content="all,follow">
    
    <link rel="preload" href="/assets/css/0.styles.76db4400.css" as="style"><link rel="preload" href="/assets/js/app.26dfc26f.js" as="script"><link rel="preload" href="/assets/js/2.845fc4bd.js" as="script"><link rel="preload" href="/assets/js/70.ea823c37.js" as="script"><link rel="prefetch" href="/assets/js/10.31502a42.js"><link rel="prefetch" href="/assets/js/11.c0667200.js"><link rel="prefetch" href="/assets/js/12.0022daab.js"><link rel="prefetch" href="/assets/js/13.496b9007.js"><link rel="prefetch" href="/assets/js/14.57a77bc0.js"><link rel="prefetch" href="/assets/js/15.a2ee4fc7.js"><link rel="prefetch" href="/assets/js/16.7050523a.js"><link rel="prefetch" href="/assets/js/17.c4c5529f.js"><link rel="prefetch" href="/assets/js/18.f0350247.js"><link rel="prefetch" href="/assets/js/19.60586b14.js"><link rel="prefetch" href="/assets/js/20.4c6361b4.js"><link rel="prefetch" href="/assets/js/21.f793d386.js"><link rel="prefetch" href="/assets/js/22.299fa3b0.js"><link rel="prefetch" href="/assets/js/23.460af9b1.js"><link rel="prefetch" href="/assets/js/24.67771dfc.js"><link rel="prefetch" href="/assets/js/25.57b0bfa7.js"><link rel="prefetch" href="/assets/js/26.30e9faee.js"><link rel="prefetch" href="/assets/js/27.15ffda62.js"><link rel="prefetch" href="/assets/js/28.4ca46604.js"><link rel="prefetch" href="/assets/js/29.09a58cb6.js"><link rel="prefetch" href="/assets/js/3.959fd4f8.js"><link rel="prefetch" href="/assets/js/30.c53f15cb.js"><link rel="prefetch" href="/assets/js/31.0d30028e.js"><link rel="prefetch" href="/assets/js/32.4591b41b.js"><link rel="prefetch" href="/assets/js/33.bd9ed146.js"><link rel="prefetch" href="/assets/js/34.0bedaafb.js"><link rel="prefetch" href="/assets/js/35.dded2c4a.js"><link rel="prefetch" href="/assets/js/36.3f14f7ef.js"><link rel="prefetch" href="/assets/js/37.348ab3dc.js"><link rel="prefetch" href="/assets/js/38.bea67b35.js"><link rel="prefetch" href="/assets/js/39.66735bad.js"><link rel="prefetch" href="/assets/js/4.a7dad9f3.js"><link rel="prefetch" href="/assets/js/40.24ae817d.js"><link rel="prefetch" href="/assets/js/41.20484420.js"><link rel="prefetch" href="/assets/js/42.d2d9cf07.js"><link rel="prefetch" href="/assets/js/43.638926f9.js"><link rel="prefetch" href="/assets/js/44.5b2e8865.js"><link rel="prefetch" href="/assets/js/45.b08599e3.js"><link rel="prefetch" href="/assets/js/46.3e165b3e.js"><link rel="prefetch" href="/assets/js/47.0f981d94.js"><link rel="prefetch" href="/assets/js/48.52c21e5e.js"><link rel="prefetch" href="/assets/js/49.5d5d4c94.js"><link rel="prefetch" href="/assets/js/5.2d6b30a8.js"><link rel="prefetch" href="/assets/js/50.379ba4f0.js"><link rel="prefetch" href="/assets/js/51.4f4ecaea.js"><link rel="prefetch" href="/assets/js/52.81ccb047.js"><link rel="prefetch" href="/assets/js/53.419686cb.js"><link rel="prefetch" href="/assets/js/54.783cb319.js"><link rel="prefetch" href="/assets/js/55.110fde12.js"><link rel="prefetch" href="/assets/js/56.53900e45.js"><link rel="prefetch" href="/assets/js/57.55cd3551.js"><link rel="prefetch" href="/assets/js/58.2b82c178.js"><link rel="prefetch" href="/assets/js/59.fec4fe12.js"><link rel="prefetch" href="/assets/js/6.4e9a5a2e.js"><link rel="prefetch" href="/assets/js/60.99354f6f.js"><link rel="prefetch" href="/assets/js/61.c528c138.js"><link rel="prefetch" href="/assets/js/62.831c810e.js"><link rel="prefetch" href="/assets/js/63.9923d5c6.js"><link rel="prefetch" href="/assets/js/64.01b9c0fd.js"><link rel="prefetch" href="/assets/js/65.1288d968.js"><link rel="prefetch" href="/assets/js/66.f7c8aabd.js"><link rel="prefetch" href="/assets/js/67.89455afa.js"><link rel="prefetch" href="/assets/js/68.ca185a9e.js"><link rel="prefetch" href="/assets/js/69.dfe2288f.js"><link rel="prefetch" href="/assets/js/7.58476ce6.js"><link rel="prefetch" href="/assets/js/71.9e222b70.js"><link rel="prefetch" href="/assets/js/72.77b15e17.js"><link rel="prefetch" href="/assets/js/73.f42962da.js"><link rel="prefetch" href="/assets/js/74.a2912f27.js"><link rel="prefetch" href="/assets/js/75.8db3af79.js"><link rel="prefetch" href="/assets/js/76.45426b7e.js"><link rel="prefetch" href="/assets/js/77.a5d8ef7a.js"><link rel="prefetch" href="/assets/js/78.cfcdd83a.js"><link rel="prefetch" href="/assets/js/79.d8b5e327.js"><link rel="prefetch" href="/assets/js/8.419e773f.js"><link rel="prefetch" href="/assets/js/80.a64f0503.js"><link rel="prefetch" href="/assets/js/9.633ba216.js">
    <link rel="stylesheet" href="/assets/css/0.styles.76db4400.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container max-content"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/images/logo.png" alt="BuildAdmin" class="logo"> <span class="site-name can-hide">BuildAdmin</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="/senior/" class="nav-link router-link-active">
  进阶
</a></div><div class="nav-item"><a href="https://buildadmin.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://demo.buildadmin.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  线上演示
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="代码仓库" class="dropdown-title"><span class="title">代码仓库</span> <span class="arrow down"></span></button> <button type="button" aria-label="代码仓库" class="mobile-dropdown-title"><span class="title">代码仓库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://gitee.com/wonderful-code/buildadmin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://github.com/build-admin/buildadmin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><a href="/fastadmin.html" class="nav-link">
  🎉FastAdmin
</a></div><div class="nav-item"><a href="https://gitee.com/wonderful-code/buildadmin/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="nav-link external">
  更新日志
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://gitee.com/wonderful-code/build-admin-doc" target="_blank" rel="noopener noreferrer" class="repo-link">
    文档仓库
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="/senior/" class="nav-link router-link-active">
  进阶
</a></div><div class="nav-item"><a href="https://buildadmin.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://demo.buildadmin.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  线上演示
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="代码仓库" class="dropdown-title"><span class="title">代码仓库</span> <span class="arrow down"></span></button> <button type="button" aria-label="代码仓库" class="mobile-dropdown-title"><span class="title">代码仓库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://gitee.com/wonderful-code/buildadmin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://github.com/build-admin/buildadmin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><a href="/fastadmin.html" class="nav-link">
  🎉FastAdmin
</a></div><div class="nav-item"><a href="https://gitee.com/wonderful-code/buildadmin/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="nav-link external">
  更新日志
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://gitee.com/wonderful-code/build-admin-doc" target="_blank" rel="noopener noreferrer" class="repo-link">
    文档仓库
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>起步</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/senior/" aria-current="page" class="sidebar-link">后台交互</a></li><li><a href="/senior/directoryStructure.html" class="sidebar-link">目录结构</a></li><li><a href="/senior/oneClickCRUD.html" class="sidebar-link">CRUD代码生成</a></li><li><a href="/senior/databaseSpecification.html" class="sidebar-link">数据表设计规范</a></li><li><a href="/senior/multilingual.html" class="sidebar-link">国际化（多语言）</a></li><li><a href="/senior/addMenuRule.html" class="sidebar-link">菜单规则（路由与权限）</a></li><li><a href="/senior/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>WEB端专项</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/senior/web/icon.html" class="sidebar-link">字体图标</a></li><li><a href="/senior/web/axios.html" class="sidebar-link">网络请求</a></li><li><a href="/senior/web/stores.html" class="sidebar-link">状态管理</a></li><li><a href="/senior/web/formItem.html" class="sidebar-link">表单项目组件（formItem）</a></li><li><a href="/senior/web/baInput.html" aria-current="page" class="active sidebar-link">输入组件（baInput）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/senior/web/baInput.html#可用属性" class="sidebar-link">可用属性</a></li><li class="sidebar-sub-header"><a href="/senior/web/baInput.html#输入框类型" class="sidebar-link">输入框类型</a></li><li class="sidebar-sub-header"><a href="/senior/web/baInput.html#示例代码" class="sidebar-link">示例代码</a></li></ul></li><li><a href="/senior/web/baTable.html" class="sidebar-link">表格组件（table）</a></li><li><a href="/senior/web/terminal.html" class="sidebar-link">WEB终端组件</a></li><li><a href="/senior/web/formValidation.html" class="sidebar-link">表单验证</a></li><li><a href="/senior/web/directives.html" class="sidebar-link">内置指令</a></li><li><a href="/senior/web/utils.html" class="sidebar-link">辅助工具/函数</a></li><li><a href="/senior/web/styles.html" class="sidebar-link">CSS/SCSS样式</a></li><li><a href="/senior/web/justNeedWeb.html" class="sidebar-link">只需要WEB端</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>WebNuxt专项（SSR）</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/senior/nuxt/intro.html" class="sidebar-link">介绍</a></li><li><a href="/senior/nuxt/directoryStructure.html" class="sidebar-link">目录结构</a></li><li><a href="/senior/nuxt/request.html" class="sidebar-link">网络请求</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Server端专项</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/senior/server/debug.html" class="sidebar-link">开启调试</a></li><li><a href="/senior/server/apiDebug.html" class="sidebar-link">调试接口</a></li><li><a href="/senior/server/config.html" class="sidebar-link">配置</a></li><li><a href="/senior/server/controller.html" class="sidebar-link">控制器</a></li><li><a href="/senior/server/captcha.html" class="sidebar-link">验证码</a></li><li><a href="/senior/server/dataLImit.html" class="sidebar-link">数据权限控制</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>模块开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/senior/module/start.html" class="sidebar-link">开始</a></li><li><a href="/senior/module/basicInfo.html" class="sidebar-link">模块基本信息</a></li><li><a href="/senior/module/directoryStructure.html" class="sidebar-link">模块目录结构</a></li><li><a href="/senior/module/configJson.html" class="sidebar-link">模块基本配置</a></li><li><a href="/senior/module/installSql.html" class="sidebar-link">模块安装SQL</a></li><li><a href="/senior/module/coreController.html" class="sidebar-link">模块核心控制器</a></li><li><a href="/senior/module/event.html" class="sidebar-link">模块行为事件</a></li><li><a href="/senior/module/webBootstrap.html" class="sidebar-link">向 main.ts 插入代码</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="输入组件-bainput"><a href="#输入组件-bainput" class="header-anchor">#</a> 输入组件（baInput）</h1> <p>我们对表单输入组件进行了封装，以方便快速生成和制作表单。</p> <div class="custom-block tip"><p class="custom-block-title">温馨提示</p> <p>本组件不等于<code>FormItem</code>，但本组件是<code>FormItem</code>的基础，类似于<code>el-form-item</code>和<code>el-input</code>的关系。</p></div> <h2 id="可用属性"><a href="#可用属性" class="header-anchor">#</a> 可用属性</h2> <table><thead><tr><th style="text-align:center;">属性名</th> <th>注释</th></tr></thead> <tbody><tr><td style="text-align:center;">type</td> <td>输入框类型(下面介绍的类型之一)，必填</td></tr> <tr><td style="text-align:center;">v-model</td> <td>双向绑定值，必填</td></tr> <tr><td style="text-align:center;">attr</td> <td>附加属性，根据输入框类型，可以设置的附加属性不一样（如<code>string</code>类型使用了<code>el-input</code>，则此处可以附加<code>el-input</code>的所有属性）</td></tr> <tr><td style="text-align:center;">data</td> <td>额外数据，比如输入类型：<code>单选框、复选框</code>的选项，<code>城市选择器</code>的区域等级配置等</td></tr></tbody></table> <h2 id="输入框类型"><a href="#输入框类型" class="header-anchor">#</a> 输入框类型</h2> <table><thead><tr><th style="text-align:center;">类型名</th> <th style="text-align:center;">注释</th> <th>渲染组件</th></tr></thead> <tbody><tr><td style="text-align:center;">string</td> <td style="text-align:center;">字符串</td> <td><code>el-input</code></td></tr> <tr><td style="text-align:center;">password</td> <td style="text-align:center;">密码</td> <td><code>el-input</code></td></tr> <tr><td style="text-align:center;">number</td> <td style="text-align:center;">数字</td> <td><code>el-input</code>，使用<code>v-model.number=&quot;val&quot;</code>绑定值</td></tr> <tr><td style="text-align:center;">radio</td> <td style="text-align:center;">单选框</td> <td><code>el-radio-group</code>和<code>el-radio</code></td></tr> <tr><td style="text-align:center;">checkbox</td> <td style="text-align:center;">复选框</td> <td><code>el-checkbox-group</code>和<code>el-checkbox</code></td></tr> <tr><td style="text-align:center;">switch</td> <td style="text-align:center;">开关</td> <td><code>el-switch</code></td></tr> <tr><td style="text-align:center;">textarea</td> <td style="text-align:center;">多行文本</td> <td><code>el-input</code></td></tr> <tr><td style="text-align:center;">array</td> <td style="text-align:center;">数组</td> <td><code>/@/components/baInput/components/array.vue</code></td></tr> <tr><td style="text-align:center;">datetime</td> <td style="text-align:center;">时间日期选择</td> <td><code>el-date-picker</code></td></tr> <tr><td style="text-align:center;">year</td> <td style="text-align:center;">年份选择</td> <td><code>el-date-picker</code></td></tr> <tr><td style="text-align:center;">date</td> <td style="text-align:center;">日期选择</td> <td><code>el-date-picker</code></td></tr> <tr><td style="text-align:center;">time</td> <td style="text-align:center;">时间选择</td> <td><code>el-time-picker</code></td></tr> <tr><td style="text-align:center;">select</td> <td style="text-align:center;">下拉选择框-单选</td> <td><code>el-select</code></td></tr> <tr><td style="text-align:center;">selects</td> <td style="text-align:center;">下拉选择框-多选</td> <td><code>el-select</code></td></tr> <tr><td style="text-align:center;">remoteSelect</td> <td style="text-align:center;">远程下拉选择框</td> <td><code>/@/components/baInput/components/remoteSelect.vue</code></td></tr> <tr><td style="text-align:center;">editor</td> <td style="text-align:center;">富文本编辑器</td> <td><code>/@/components/editor/index.vue</code></td></tr> <tr><td style="text-align:center;">city</td> <td style="text-align:center;">城市选择器</td> <td><code>el-cascader</code></td></tr> <tr><td style="text-align:center;">image</td> <td style="text-align:center;">图片上传</td> <td>内部使用<code>el-upload</code>，但已封装了上传<code>api</code>等</td></tr> <tr><td style="text-align:center;">images</td> <td style="text-align:center;">图片上传-多图</td> <td><code>el-upload</code></td></tr> <tr><td style="text-align:center;">file</td> <td style="text-align:center;">文件上传</td> <td><code>el-upload</code></td></tr> <tr><td style="text-align:center;">files</td> <td style="text-align:center;">文件上传-多文件</td> <td><code>el-upload</code></td></tr> <tr><td style="text-align:center;">icon</td> <td style="text-align:center;">图标选择器</td> <td><code>/@/components/baInput/components/iconSelector.vue</code>参：<a href="https://wonderful-code.gitee.io/senior/web/icon.html#%E5%9B%BE%E6%A0%87%E9%80%89%E6%8B%A9%E5%99%A8%E7%BB%84%E4%BB%B6" target="_blank" rel="noopener noreferrer">字体图标选择器<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></td></tr></tbody></table> <h2 id="示例代码"><a href="#示例代码" class="header-anchor">#</a> 示例代码</h2> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-scrollbar</span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>96vh<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form-box<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>120px<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label-position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            
            <span class="token comment">&lt;!-- 以下四种输入框使用了 el-input --&gt;</span>
            <span class="token comment">&lt;!-- attr 属性演示了如何添加 el-input 组件原有的属性 --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BaInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>string<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items.string<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:attr</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{
                maxlength: 10,
                clearable: true,
                onChange: onChangeString, // 事件以on开头，并使用大写驼峰的事件名称定义，不支持在此处单独传递$event（若需要请改用el-input）
            }<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BaInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items.password<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:attr</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ maxlength: 10, clearable: true, 'show-password': true }<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BaInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>number<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model.number</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items.number<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:attr</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ clearable: true, size: 'large' }<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BaInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>textarea<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items.textarea<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:attr</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ 'show-word-limit': true, rows: 3 }<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>

            <span class="token comment">&lt;!-- 同时使用了 el-radio-group 和 el-radio --&gt;</span>
            <span class="token comment">&lt;!-- 通过 data.content 配置了`选项`数据 --&gt;</span>
            <span class="token comment">&lt;!-- 通过 attr 设置了el-radio-group 的 size 属性 --&gt;</span>
            <span class="token comment">&lt;!-- 通过 data.childrenAttr 设置了 el-radio 的 border 属性 --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BaInput</span>
                <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>radio<span class="token punctuation">&quot;</span></span>
                <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items.radio<span class="token punctuation">&quot;</span></span>
                <span class="token attr-name">:attr</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ size: 'large' }<span class="token punctuation">&quot;</span></span>
                <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ childrenAttr: { border: true }, content: { a: '选项a', b: '选项b' } }<span class="token punctuation">&quot;</span></span>
            <span class="token punctuation">/&gt;</span></span>

            <span class="token comment">&lt;!-- 同时使用了 el-checkbox-group 和 el-checkbox --&gt;</span>
            <span class="token comment">&lt;!-- 本类型类似于 radio 只是它的绑定值是一个数组 --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BaInput</span>
                <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>checkbox<span class="token punctuation">&quot;</span></span>
                <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items.checkbox<span class="token punctuation">&quot;</span></span>
                <span class="token attr-name">:attr</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ size: 'large' }<span class="token punctuation">&quot;</span></span>
                <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ childrenAttr: { border: true }, content: { '0': '选项a', '1': '选项b' } }<span class="token punctuation">&quot;</span></span>
            <span class="token punctuation">/&gt;</span></span>

            <span class="token comment">&lt;!-- 使用了 el-switch --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BaInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>switch<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items.switch<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:attr</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ size: 'large' }<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>

            <span class="token comment">&lt;!-- 使用了自定义组件 /@/components/baInput/components/array.vue --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BaInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>array<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items.array<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>

            <span class="token comment">&lt;!-- 以下三种输入框使用了 el-date-picker --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BaInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>datetime<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items.datetime<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BaInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>year<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items.year<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BaInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items.date<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>

            <span class="token comment">&lt;!-- 使用了 el-time-picker --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BaInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>time<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items.time<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>

            <span class="token comment">&lt;!-- 以下两种输入框使用了 el-select --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BaInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>select<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items.select<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ content: { '0': '选项0', '1': '选项1' } }<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BaInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>selects<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items.selects<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ content: { '0': '选项0', '1': '选项1', '2': '选项2' } }<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>

            <span class="token comment">&lt;!-- 使用了自定义组件 /@/components/baInput/components/remoteSelect.vue --&gt;</span>
            <span class="token comment">&lt;!-- 使用时，请确保pk(主键),field(字段),remote-url(api地址,通常为控制器的index方法即可)配置正确 --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BaInput</span>
                <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>remoteSelect<span class="token punctuation">&quot;</span></span>
                <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items.remoteSelect<span class="token punctuation">&quot;</span></span>
                <span class="token attr-name">:attr</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{
                    multiple: false,
                    pk: 'user.id',
                    field: 'nickname',
                    'remote-url': userUser + 'index',
                    placeholder: '点击选择远程数据-单选',
                }<span class="token punctuation">&quot;</span></span>
            <span class="token punctuation">/&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BaInput</span>
                <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>remoteSelect<span class="token punctuation">&quot;</span></span>
                <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items.remoteSelects<span class="token punctuation">&quot;</span></span>
                <span class="token attr-name">:attr</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{
                    multiple: true,
                    pk: 'user.id',
                    field: 'nickname',
                    'remote-url': userUser + 'index',
                    placeholder: '点击选择远程数据-多选',
                }<span class="token punctuation">&quot;</span></span>
            <span class="token punctuation">/&gt;</span></span>

            <span class="token comment">&lt;!-- 使用了 el-cascader --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BaInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>city<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items.city<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>

            <span class="token comment">&lt;!-- 以下四种输入框使用了 el-upload --&gt;</span>
            <span class="token comment">&lt;!-- images 和 files 可以绑定数组类型的值 --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BaInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>image<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items.image<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BaInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>images<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items.images<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BaInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>file<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items.file<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BaInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>files<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items.files<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>

            <span class="token comment">&lt;!-- 使用了自定义组件 /@/components/editor/index.vue --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BaInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>editor<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items.editor<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>

            <span class="token comment">&lt;!-- 使用了自定义组件 /@/components/baInput/components/iconSelector.vue --&gt;</span>
            <span class="token comment">&lt;!-- 具体使用请参考`字体图标` --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BaInput</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>items.icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:attr</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ placement: 'top', 'show-icon-name': true }<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-scrollbar</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">import</span> BaInput <span class="token keyword">from</span> <span class="token string">'/@/components/baInput/index.vue'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> userUser <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/@/api/controllerUrls'</span>

<span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">string</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">password</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">number</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token literal-property property">textarea</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">radio</span><span class="token operator">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">checkbox</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'0'</span><span class="token punctuation">,</span> <span class="token string">'1'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token keyword">switch</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token literal-property property">array</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'这里是key'</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'这里是Value'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">datetime</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">year</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">time</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">select</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">selects</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'0'</span><span class="token punctuation">,</span> <span class="token string">'1'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">remoteSelect</span><span class="token operator">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">remoteSelects</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">editor</span><span class="token operator">:</span> <span class="token string">'&lt;p&gt;默认内容&lt;/p&gt;'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">city</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    <span class="token literal-property property">image</span><span class="token operator">:</span> <span class="token string">'http://localhost:1818/src/assets/logo.png'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">images</span><span class="token operator">:</span> <span class="token string">'http://localhost:1818/src/assets/logo.png'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">file</span><span class="token operator">:</span> <span class="token string">'http://localhost:1818/src/assets/logo.png'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">files</span><span class="token operator">:</span> <span class="token string">'http://localhost:1818/src/assets/logo.png'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token string">'el-icon-Apple'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scss<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.form-box</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 80vw<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 96vh<span class="token punctuation">;</span>
    <span class="token property">margin</span><span class="token punctuation">:</span> 40px auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://gitee.com/wonderful-code/build-admin-doc/edit/master/docs/senior/web/baInput.md" target="_blank" rel="noopener noreferrer">点此帮助我们改善此页面</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2022/12/8 16:32:51</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/senior/web/formItem.html" class="prev">
        表单项目组件（formItem）
      </a></span> <span class="next"><a href="/senior/web/baTable.html">
        表格组件（table）
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.26dfc26f.js" defer></script><script src="/assets/js/2.845fc4bd.js" defer></script><script src="/assets/js/70.ea823c37.js" defer></script>
  </body>
</html>
